/* Element Plus 深色主题全局样式配置 */
/* 
使用方法：
1. 将此文件保存为 src/styles/element-plus-theme.css
2. 在 main.js 中导入: import './styles/element-plus-theme.css'
3. 或者在 Vue 组件中使用 <style> 标签（不要加 scoped）
*/

/* ========== 颜色变量定义 ========== */
:root {
    /* 主要背景色 */
    --el-bg-color-page: #0f0f0f;
    --el-bg-color: #1a1a1a;
    --el-bg-color-overlay: #1a1a1a;

    /* 次要背景色 */
    --el-bg-color-darker: #0f0f0f;
    --el-bg-color-dark: #1a1a1a;
    --el-bg-color-light: #2d2d2d;
    --el-bg-color-lighter: #3a3a3a;

    /* 文字颜色 */
    --el-text-color-primary: #ffffff;
    --el-text-color-regular: #e5e7eb;
    --el-text-color-secondary: #9ca3af;
    --el-text-color-placeholder: #6b7280;
    --el-text-color-disabled: #4b5563;

    /* 边框颜色 */
    --el-border-color: #4b5563;
    --el-border-color-light: #374151;
    --el-border-color-lighter: #2d2d2d;
    --el-border-color-extra-light: #1f2937;

    /* 主题色 */
    --el-color-primary: #3b82f6;
    --el-color-primary-light-3: #60a5fa;
    --el-color-primary-light-5: #93c5fd;
    --el-color-primary-light-7: #bfdbfe;
    --el-color-primary-light-8: #dbeafe;
    --el-color-primary-light-9: #eff6ff;
    --el-color-primary-dark-2: #2563eb;

    /* 成功色 */
    --el-color-success: #10b981;
    --el-color-success-light-3: #34d399;
    --el-color-success-light-5: #6ee7b7;
    --el-color-success-light-7: #a7f3d0;
    --el-color-success-light-8: #c6f6d5;
    --el-color-success-light-9: #d1fae5;

    /* 警告色 */
    --el-color-warning: #f59e0b;
    --el-color-warning-light-3: #fbbf24;
    --el-color-warning-light-5: #fcd34d;
    --el-color-warning-light-7: #fde68a;
    --el-color-warning-light-8: #fef3c7;
    --el-color-warning-light-9: #fffbeb;

    /* 危险色 */
    --el-color-danger: #ef4444;
    --el-color-danger-light-3: #f87171;
    --el-color-danger-light-5: #fca5a5;
    --el-color-danger-light-7: #fecaca;
    --el-color-danger-light-8: #fee2e2;
    --el-color-danger-light-9: #fef2f2;

    /* 信息色 */
    --el-color-info: #6b7280;
    --el-color-info-light-3: #9ca3af;
    --el-color-info-light-5: #d1d5db;
    --el-color-info-light-7: #e5e7eb;
    --el-color-info-light-8: #f3f4f6;
    --el-color-info-light-9: #f9fafb;

    /* 填充色 */
    --el-fill-color: #2d2d2d;
    --el-fill-color-light: #3a3a3a;
    --el-fill-color-lighter: #4a4a4a;
    --el-fill-color-extra-light: #5a5a5a;
    --el-fill-color-blank: #1a1a1a;
    --el-fill-color-dark: #0f0f0f;

    /* 阴影 */
    --el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.36), 0 8px 20px rgba(0, 0, 0, 0.2);
    --el-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.12);
    --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    --el-box-shadow-dark: 0 16px 48px 16px rgba(0, 0, 0, 0.72), 0 12px 32px rgba(0, 0, 0, 0.32);
}




/* ========== Tabs 标签页样式 ========== */
:deep(.el-tabs) {
    background: transparent !important;
}

:deep(.el-tabs__header) {
    background: #2d2d2d !important;
    border-bottom: 1px solid #374151 !important;
    margin: 0 !important;
    border-radius: 8px 8px 0 0 !important;
}

:deep(.el-tabs__nav-wrap) {
    background: transparent !important;
}

:deep(.el-tabs__nav-scroll) {
    background: transparent !important;
}

:deep(.el-tabs__nav) {
    background: transparent !important;
    border: none !important;
}

:deep(.el-tabs__item) {
    background: transparent !important;
    color: #9ca3af !important;
    border: none !important;
    padding: 16px 24px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

:deep(.el-tabs__item:hover) {
    color: #e5e7eb !important;
    background: #374151 !important;
}

:deep(.el-tabs__item.is-active) {
    color: #3b82f6 !important;
    background: #1e3a8a !important;
    background: rgba(59, 130, 246, 0.1) !important;
}

:deep(.el-tabs__active-bar) {
    background: #3b82f6 !important;
    height: 3px !important;
}

:deep(.el-tabs__content) {
    background: #1a1a1a !important;
    padding: 24px !important;
    border-radius: 0 0 8px 8px !important;
    border: 1px solid #374151 !important;
    border-top: none !important;
}

/* ========== Button 按钮样式 ========== */
:deep(.el-button) {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

/* 默认按钮 */
:deep(.el-button--default) {
    background: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

:deep(.el-button--default:hover) {
    background: #4b5563 !important;
    color: #ffffff !important;
    border-color: #6b7280 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 主要按钮 */
:deep(.el-button--primary) {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

:deep(.el-button--primary:hover) {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

/* 成功按钮 */
:deep(.el-button--success) {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

:deep(.el-button--success:hover) {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

/* 危险按钮 */
:deep(.el-button--danger) {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

:deep(.el-button--danger:hover) {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
}

/* 文本按钮 */
:deep(.el-button--text) {
    background: transparent !important;
    color: #3b82f6 !important;
    border: none !important;
}

:deep(.el-button--text:hover) {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
}

/* 按钮加载状态 */
:deep(.el-button.is-loading) {
    opacity: 0.8 !important;
    pointer-events: none !important;
}

/* 按钮禁用状态 */
:deep(.el-button.is-disabled) {
    background: #374151 !important;
    color: #6b7280 !important;
    border-color: #374151 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* ========== Table 表格样式 ========== */
:deep(.el-table) {
    background: #1a1a1a !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

:deep(.el-table th.el-table__cell) {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-bottom: 1px solid #374151 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 16px 12px !important;
}

:deep(.el-table td.el-table__cell) {
    background: #1a1a1a !important;
    color: #e5e7eb !important;
    border-bottom: 1px solid #2d2d2d !important;
    padding: 16px 12px !important;
    transition: background 0.2s ease !important;
}

:deep(.el-table tbody tr:hover td.el-table__cell) {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

:deep(.el-table tr.el-table__row--striped td.el-table__cell) {
    background: #1f1f1f !important;
}

:deep(.el-table tr.el-table__row--striped:hover td.el-table__cell) {
    background: #2d2d2d !important;
}

/* 表格空状态 */
:deep(.el-table__empty-block) {
    background: #1a1a1a !important;
}

:deep(.el-table__empty-text) {
    color: #6b7280 !important;
}

/* 表格滚动条 */
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 8px !important;
    height: 8px !important;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
    background: #2d2d2d !important;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    background: #4b5563 !important;
    border-radius: 4px !important;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
    background: #6b7280 !important;
}

/* ========== Input 输入框样式 ========== */
:deep(.el-input__wrapper) {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

:deep(.el-input__wrapper:hover) {
    border-color: #6b7280 !important;
    background: #3f3f46 !important;
}

:deep(.el-input__wrapper.is-focus) {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
    background: #3f3f46 !important;
}

:deep(.el-input__inner) {
    color: #ffffff !important;
    background: transparent !important;
    font-size: 14px !important;
}

:deep(.el-input__inner::placeholder) {
    color: #6b7280 !important;
}

/* 输入框前缀后缀 */
:deep(.el-input__prefix),
:deep(.el-input__suffix) {
    color: #9ca3af !important;
}

/* 文本域样式 */
:deep(.el-textarea__inner) {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    resize: vertical !important;
}

:deep(.el-textarea__inner:hover) {
    border-color: #6b7280 !important;
    background: #3f3f46 !important;
}

:deep(.el-textarea__inner:focus) {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
    background: #3f3f46 !important;
    outline: none !important;
}

:deep(.el-textarea__inner::placeholder) {
    color: #6b7280 !important;
}

/* 输入框计数器 */
:deep(.el-input__count) {
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 12px !important;
}

/* ========== Form 表单样式 ========== */
:deep(.el-form-item__label) {
    color: #e5e7eb !important;
    font-weight: 500 !important;
}

:deep(.el-form-item__error) {
    color: #ef4444 !important;
    font-size: 12px !important;
}

/* ========== Message 消息提示样式 ========== */
:deep(.el-message) {
    background: #2d2d2d !important;
    border: 1px solid #4b5563 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-message--success) {
    background: #064e3b !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
}

:deep(.el-message--error) {
    background: #7f1d1d !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

:deep(.el-message--warning) {
    background: #78350f !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}

:deep(.el-message--info) {
    background: #374151 !important;
    border-color: #6b7280 !important;
    color: #d1d5db !important;
}

/* ========== Tooltip 提示框样式 ========== */
:deep(.el-popper) {
    background: #2d2d2d !important;
    border: 1px solid #4b5563 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-popper .el-popper__arrow::before) {
    background: #2d2d2d !important;
    border: 1px solid #4b5563 !important;
}

/* ========== Progress 进度条样式 ========== */
:deep(.el-progress-bar__outer) {
    background: #374151 !important;
    border-radius: 10px !important;
}

:deep(.el-progress-bar__inner) {
    background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

:deep(.el-progress__text) {
    color: #e5e7eb !important;
}

/* ========== Tag 标签样式 ========== */
:deep(.el-tag) {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    color: #e5e7eb !important;
    border-radius: 6px !important;
}

:deep(.el-tag--primary) {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}

:deep(.el-tag--success) {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    color: #6ee7b7 !important;
}

:deep(.el-tag--warning) {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: #f59e0b !important;
    color: #fcd34d !important;
}

:deep(.el-tag--danger) {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

/* ========== Upload 上传组件样式 ========== */
:deep(.el-upload-dragger) {
    background: transparent !important;
    border: 2px dashed #6b7280 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

:deep(.el-upload-dragger:hover) {
    border-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.05) !important;
}

:deep(.el-upload-dragger .el-upload__text) {
    color: #e5e7eb !important;
}

:deep(.el-upload-list) {
    background: transparent !important;
}

:deep(.el-upload-list__item) {
    background: #2d2d2d !important;
    border: 1px solid #4b5563 !important;
    color: #e5e7eb !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
}

:deep(.el-upload-list__item:hover) {
    background: #374151 !important;
}

/* ========== Pagination 分页样式 ========== */
:deep(.el-pagination) {
    color: #e5e7eb !important;
}

:deep(.el-pager li) {
    background: #374151 !important;
    color: #e5e7eb !important;
    border: 1px solid #4b5563 !important;
    margin: 0 2px !important;
    border-radius: 6px !important;
}

:deep(.el-pager li:hover) {
    background: #4b5563 !important;
    color: #ffffff !important;
}

:deep(.el-pager li.active) {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

:deep(.el-pagination button) {
    background: #374151 !important;
    color: #e5e7eb !important;
    border: 1px solid #4b5563 !important;
    border-radius: 6px !important;
}

:deep(.el-pagination button:hover) {
    background: #4b5563 !important;
    color: #ffffff !important;
}

:deep(.el-pagination button:disabled) {
    background: #2d2d2d !important;
    color: #6b7280 !important;
}

/* ========== Switch 开关样式 ========== */
:deep(.el-switch) {
    --el-switch-on-color: #3b82f6 !important;
    --el-switch-off-color: #6b7280 !important;
    --el-switch-border-color: #4b5563 !important;
}

:deep(.el-switch__core) {
    background: #6b7280 !important;
    border-color: #4b5563 !important;
}

:deep(.el-switch.is-checked .el-switch__core) {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* ========== Radio & Checkbox 样式 ========== */
:deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

:deep(.el-radio__inner) {
    background: #374151 !important;
    border-color: #4b5563 !important;
}

:deep(.el-radio__label) {
    color: #e5e7eb !important;
}

/* 2. 下拉菜单容器 */
.el-select__popper,
.el-select-dropdown,
.el-popper.el-select__popper {
    background: #2d2d2d !important;
    border: 1px solid #4b5563 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* 3. 下拉菜单选项 */
.el-select-dropdown__item,
.el-select__dropdown-item {
    color: #e5e7eb !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.el-select-dropdown__item:hover,
.el-select__dropdown-item:hover {
    background: #374151 !important;
    color: #ffffff !important;
}

.el-select-dropdown__item.selected,
.el-select__dropdown-item.selected,
.el-select-dropdown__item.is-selected,
.el-select__dropdown-item.is-selected {
    background: #313131 !important;
    color: #ffffff !important;
}

.el-select-dropdown__item.disabled,
.el-select__dropdown-item.disabled,
.el-select-dropdown__item.is-disabled,
.el-select__dropdown-item.is-disabled {
    color: #6b7280 !important;
    background: transparent !important;
}

/* 4. 空状态 */
.el-select-dropdown__empty,
.el-select__dropdown-empty {
    color: #9ca3af !important;
    background: #2d2d2d !important;
}

/* 5. 滚动条 */
.el-select-dropdown .el-scrollbar__wrap {
    background: #2d2d2d !important;
}

.el-select-dropdown .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
    background: #4b5563 !important;
}

/* 6. 多选模式的标签 */
.el-select__tags .el-tag {
    background: #4b5563 !important;
    border: 1px solid #6b7280 !important;
    color: #e5e7eb !important;
}

.el-select__tags .el-tag .el-tag__close {
    color: #9ca3af !important;
}

.el-select__tags .el-tag .el-tag__close:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}